"use client";
import React from "react";
import { MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons';
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Mentions,
  Segmented,
  Select,
  TreeSelect,
  Radio
} from 'antd';

const { RangePicker } = DatePicker;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
};

export default function Lsy() {
  const [form] = Form.useForm();
  const variant = Form.useWatch('variant', form);
  return (
    <div style={{
      height: '700px',
      overflow: 'auto',
    }}>
      <h3><MenuUnfoldOutlined />修改资料</h3>
      <hr />
      <div style={{ textAlign: 'center' }}>
        <UserOutlined style={{ fontSize: '100px' }} />
        <p style={{ color: 'skyblue' }}>更换头像</p>
      </div>
      <h3>基本资料</h3>
      <div>
        <Form
          {...formItemLayout}
          form={form}
          variant={variant || 'filled'}
          style={{ maxWidth: 600, margin: '0 auto' }}
          initialValues={{ variant: 'filled' }}
        >
          <Form.Item label="员工姓名" name="Input" rules={[{ required: true, message: 'Please input!' }]}>
            <Input placeholder="大荔" />
          </Form.Item>
          <Form.Item label="登录账号" name="Input" rules={[{ required: true, message: 'Please input!' }]}>
            <Input placeholder="Winder" />
          </Form.Item>
          <Form.Item label="所属部门" name="Input" rules={[{ required: true, message: 'Please input!' }]}>
            <Input placeholder="销售部" />
          </Form.Item>
          <Form.Item label="当前职务" name="Input" rules={[{ required: true, message: 'Please input!' }]}>
            <Input placeholder="部门经理" />
          </Form.Item>
          <Form.Item
            label="员工生日"
            name="DatePicker"
            rules={[{ required: true, message: 'Please input!' }]}
          >
            <DatePicker />
          </Form.Item>
          <Form.Item label="邮箱地址" name="Input" rules={[{ required: true, message: 'Please input!' }]}>
            <Input placeholder="邮箱地址" />
          </Form.Item>
          <Form.Item label="手机号码" name="Input" rules={[{ required: true, message: 'Please input!' }]}>
            <Input placeholder="手机号码" />
          </Form.Item>
          <Form.Item label="微信账号" name="Input">
            <Input placeholder="微信账号" />
          </Form.Item>
        </Form>
      </div>
      <h3>更多信息</h3>
      <div>
        <Form
          {...formItemLayout}
          form={form}
          variant={variant || 'filled'}
          style={{ maxWidth: 600, margin: '0 auto' }}
          initialValues={{ variant: 'filled' }}
        >
          <Form.Item label="工号">
            <Input placeholder="编写工号" />
          </Form.Item>
          <Form.Item label="籍贯">
            <Input placeholder="填写籍贯" />
          </Form.Item>
          <Form.Item label="毕业院校">
            <Input placeholder="填写毕业院校" />
          </Form.Item>
          <Form.Item label="毕业时间">
            <DatePicker />
          </Form.Item>
          <Form.Item label="学历">
            <Select>
              <Select.Option value="本科">本科</Select.Option>
              <Select.Option value="大专">大专</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="所选专业">
            <Input placeholder="填写所选专业" />
          </Form.Item>
          <Form.Item
            label="备注"
            name="TextArea"
          >
            <Input.TextArea placeholder="请输入备注信息" />
          </Form.Item>
          <Form.Item label="Button">
            <Button type="primary">提交</Button>
            <Button>重置</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
